<template>
  <div class="answer">
      <!-- <h1>{{info.title}}</h1> -->
      <div class="answer-title"><img :src="info.title" alt=""></div>
      <!-- <div class="answer-title"><img src="../assets/images/wt1.png" alt=""></div> -->
      <ul>
          <li class="answer-slect" v-for="(item,index) in info.slect" :key="index" @click="slector(index)">
            <!-- <van-button size='large' @click="slector(index)" type="Primary">{{item}}</van-button>               -->
            <img :src="item" alt="">
            <!-- <img src="../assets/images/wt1q1.png" alt=""> -->
            <span v-show="info.zq[index]"></span>
          </li>
      </ul>
        <van-button :style="nextImg" class="answer-next" :disabled='isDisabled' size='large' @click="setInfo(++info.id_num)" type="default">{{info.id_num < question.length-1?'.':'.'}}</van-button>
  </div>
</template>

<style scoped lang='scss'>
.answer{
    height: 100%;
    width: 100%;
        background: url('../assets/images/beijing2.png')no-repeat center/cover;

        &-title{
            width: 88%;
            margin: 0 auto;
            padding: 45% 0 6%;
            img{
                width: 100%;
            }
        }
        &-slect{
            position: relative;
            width: 71%;
            margin: 8% auto;
            img{
                width: 100%;
            }
            span{
                width: 8%;
                height: 70%;
                background: url('../assets/images/zq.png')no-repeat center/100% 100%;
                position: absolute;
                top: 8%;
                left: 8%;
            }
        }
        &-next{
            display: block;
        background: url('../assets/images/xyt.png')no-repeat center/cover;
            // height: auto;
            width: 63%;
            border: 0;
            margin: 0 auto;
            margin-top: 5%;
            transform: scale(.9);
        }
}
    
</style>


<script>
    import Vue from 'vue'
    import { Button,NavBar,Toast } from 'vant';
    Vue.component(Button.name, Button);
    Vue.component(NavBar.name, NavBar);
    export default{
        name:'answer',
        
        data(){
            return {
                 question:[
                     {
                         id_num:0,
                        title:'./static/img/wt1.png',
                        slect:['./static/img/wt1q1.png','./static/img/wt1q2.png','./static/img/wt1q3.png'],
                        isOK:0,
                        zq:[false,false,false]
                    },
                    {
                         id_num:1,                        
                        title:'./static/img/wt2.png',
                        slect:['./static/img/wt2q1.png','./static/img/wt2q2.png','./static/img/wt2q3.png'],
                        isOK:1,
                        zq:[false,false,false]
                        
                    },
                    {
                         id_num:2,                        
                        title:'./static/img/wt3.png',
                        slect:['./static/img/wt3q1.png','./static/img/wt3q2.png','./static/img/wt3q3.png'],
                        zq:[false,false,false],                        
                        isOK:3
                    },
                    {
                         id_num:3,                        
                        title:'./static/img/wt4.png',
                        slect:['./static/img/wt4q1.png','./static/img/wt4q2.png','./static/img/wt4q3.png'],
                        zq:[false,false,false],                        
                        isOK:1
                    },
                    {
                         id_num:4,                        
                        title:'./static/img/wt5.png',
                        slect:['./static/img/wt5q1.png','./static/img/wt5q2.png','./static/img/wt5q3.png'],
                        zq:[false,false,false],                        
                        isOK:0
                    }
                 ],
                 info:{
                         id_num:0,                     
                        title:'./static/img/wt1.png',
                        slect:['./static/img/wt1q1.png','./static/img/wt1q2.png','./static/img/wt1q3.png'],
                        zq:[false,false,false],                        
                        isOK:1                        
                    },
                    isDisabled:true,
                    okNum:1,
                    nextImg:"background:url('./static/img/xyt.png')no-repeat center/100% 100%"
            }   
        },
        methods:{
            setInfo(_id){
                if(_id==4){
                    this.nextImg = "background:url('./static/img/scjg.png')no-repeat center/100% 100%"
                }
                if(_id>=5){
                    this.$router.push({ path: 'result', query: { plan: this.okNum }})
                }
                this.info = this.question[_id];
                this.isDisabled = true;
            },
            slector(slectNo){
                if(slectNo == this.info.isOK){
                    ++this.okNum;
                    // Toast('答案正确了哦~');
                }
                this.isDisabled = false;
                this.info.zq = [false,false,false];
                this.info.zq.forEach((v,i)=>{
                    if(i == slectNo){
                        this.info.zq[slectNo] = true;
                    }
                });
                
            }
        }
    }
</script>